// Easy Responsive Tabs Plugin
// Author: Samson.Onna <Email : samson3d@gmail.com>
(function($) {
	$.fn.extend({
		sign: function(options) {
			//Set the default values, use comma to separate the settings, example:
			var defaults = {
				type: 'default', //default, vertical, accordion;
				width: 'auto',
				fit: true
			}
			//Variables
			var options = $.extend(defaults, options);
			var opt = options,
				jtype = opt.type,
				jfit = opt.fit,
				jwidth = opt.width,
				vtabs = 'vertical',
				accord = 'accordion';

			//Main function
			this.each(function() {
				// 设置当前元素为变量 $respTabs
				var $respTabs = $(this);
				// 查找当前元素中的后代元素为 ul.resp-tabs-list li 的元素，并添加样式
				$respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item');
				// 设置当前元素为块元素，宽度为。。。。。看不懂
				$respTabs.css({
					'display': 'block',
					'width': jwidth
				});
				// 查找当前元素中的后代元素为 .resp-tabs-container > div 的元素，并添加样式
				// 设置登录框中所有的 DIV 的display 属性为 none
				$respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content');

				//标记
				var count = 0,
					$tabContent;
				// 遍历当前元素中后代为 resp-tab-ite的元素
				$respTabs.find('.resp-tab-item').each(function() {
					$tabItem = $(this);
					// 设置属性和属性值
					$tabItem.attr('aria-controls', 'tab_item-' + (count));
					// 设置属性和属性值
					$tabItem.attr('role', 'tab');

					// 设置第一个 resp-tab-item 元素的样式为：无文本阴影、字体颜色为紫色、背景颜色为白色
					$respTabs.find('.resp-tab-item').first().addClass('resp-tab-active');
					// 设置第一个功能DIV（用户名登录）的样式（但样式库里找不到指定的样式），添加样式属性 display 为块元素
					$respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style',
						'display:block');

					//标记
					var tabcount = 0;
					// 遍历元素的所有后代为 resp-tab-content 的元素
					$respTabs.find('.resp-tab-content').each(function() {
						// 获取当前元素
						$tabContent = $(this);
						// 设置当前元素的属性和属性值
						$tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount));
						tabcount++;
					});
					count++;
				});

				// 设置登录方式的点击动作
				// 遍历当前元素的所有后代为 [role=tab] 的元素
				$respTabs.find("[role=tab]").each(function() {
					// 获取当前元素
					var $currentTab = $(this);
					// 当前元素的点击方法
					$currentTab.click(function() {
						// 获取当前元素的 aria-controls 属性的值
						var $tabAria = $currentTab.attr('aria-controls');
						// 检查当前元素是否包含 resp-accordion 类 和 resp-tab-active 类
						// resp-accordion 类：设置鼠标样式、内边距、display 属性
						// resp-tab-active 类：设置无文字阴影、字体颜色为红色、背景颜色为白色
						if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) {
							$respTabs.find("resp-tab-active").addClass('resp-tab-active');
							$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass(
								'resp-tab-content-active');
						} else {
							$respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
							$respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass(
								'resp-accordion-closed');
							$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
							$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass(
								'resp-tab-content-active').attr('style', 'display:block');
						}
					});
					//Window resize function                   
					$(window).resize(function() {
						$respTabs.find('.resp-accordion-closed').removeAttr('style');
					});
				});
			});
		}
	});
})(jQuery);
